<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="outPatientRegistration1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="outPatientRegistration2">
        2020
      </div>
      <div v-if="curId===2" class="chart-content" ref="outPatientRegistration3">
        2021
      </div>
    </div>
    <img src="@/assets/images/848.png" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis3-menjizhengguahao',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
      let option3={
          backgroundColor: '',
          title: {
              text: '单位/人',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14,
                  color: '#F1F1F3'
              },
              top: '1%',
              left: '1.5%'
          },
          grid: {
              top: '15%',
              right: '3%',
              left: '5%',
              bottom: '12%'
          },
          legend: {
              orient: 'horizontal',
              itemWidth: 18,
              itemHeight: 18,
              itemGap: 30,
              left: '80%',
              top:"0%",
              data: ['2019年','2020年'],
              show: true,
              textStyle: {
                color:"#ffffff",
                fontSize:14
            },
          },

          xAxis: [{
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                  show:true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
              axisLabel: {
                  margin: 10,
                  color: 'rgb(170,170,170)',
                  textStyle: {
                      fontSize: 14
                  },
              },
          }],
          yAxis: [{
              splitNumber: 5,
              axisLabel: {
                  formatter: '{value}',
                  color: '#e2e9ff',
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
          splitLine: {
                    show: true,
                    lineStyle: {
                      color: '#233653',//网格线的颜色
                      width: 1,
                      type: 'solid'
                    }
                  },
          }],
          series: [{
              name:'2019年',
              type: 'bar',
              data: [4500, 4000, 3500, 2003, 2155, 3300, 4300,3500, 1203, 3555, 2503, 3255,],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#4C29DF' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#33A9EE' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          },{
              name:'2020年',
              type: 'bar',
              data: [4000, 3500, 2500, 3200, 3255, 4000, 3000,3770, 2003, 4255, 2803, 4255],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#DF7829' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#DFC365' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          }]
      };
      this.makeGraph(this.$refs.outPatientRegistration1,option3)

      let option4={
          backgroundColor: '',
          title: {
              text: '单位/人',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14,
                  color: '#F1F1F3'
              },
              top: '1%',
              left: '1.5%'
          },
          grid: {
              top: '15%',
              right: '3%',
              left: '5%',
              bottom: '12%'
          },
          legend: {
              orient: 'horizontal',
              itemWidth: 18,
              itemHeight: 18,
              itemGap: 30,
              left: '80%',
              top:"0%",
              data: ['2019年','2020年'],
              show: true,
              textStyle: {
                color:"#ffffff",
                fontSize:14
            },
          },

          xAxis: [{
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                  show:true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
              axisLabel: {
                  margin: 10,
                  color: 'rgb(170,170,170)',
                  textStyle: {
                      fontSize: 14
                  },
              },
          }],
          yAxis: [{
              splitNumber: 5,
              axisLabel: {
                  formatter: '{value}',
                  color: '#e2e9ff',
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
          splitLine: {
                    show: true,
                    lineStyle: {
                      color: '#233653',//网格线的颜色
                      width: 1,
                      type: 'solid'
                    }
                  },
          }],
          series: [{
              name:'2019年',
              type: 'bar',
              data: [5000, 4000, 3500, 2003, 2155, 3300, 4300,3500, 1203, 3555, 2503, 3255,],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#4C29DF' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#33A9EE' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          },{
              name:'2020年',
              type: 'bar',
              data: [5000, 3500, 2500, 3200, 3255, 4000, 3000,3770, 2003, 4255, 2803, 4255],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#DF7829' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#DFC365' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          }]
      };
      this.makeGraph(this.$refs.outPatientRegistration2,option4)

      let option5={
          backgroundColor: '',
          title: {
              text: '单位/人',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14,
                  color: '#F1F1F3'
              },
              top: '1%',
              left: '1.5%'
          },
          grid: {
              top: '15%',
              right: '3%',
              left: '5%',
              bottom: '12%'
          },
          legend: {
              orient: 'horizontal',
              itemWidth: 18,
              itemHeight: 18,
              itemGap: 30,
              left: '80%',
              top:"0%",
              data: ['2019年','2020年'],
              show: true,
              textStyle: {
                color:"#ffffff",
                fontSize:14
            },
          },

          xAxis: [{
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                  show:true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
              axisLabel: {
                  margin: 10,
                  color: 'rgb(170,170,170)',
                  textStyle: {
                      fontSize: 14
                  },
              },
          }],
          yAxis: [{
              splitNumber: 5,
              axisLabel: {
                  formatter: '{value}',
                  color: '#e2e9ff',
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#CCCCCC'
                  }
              },
          splitLine: {
                    show: true,
                    lineStyle: {
                      color: '#233653',//网格线的颜色
                      width: 1,
                      type: 'solid'
                    }
                  },
          }],
          series: [{
              name:'2019年',
              type: 'bar',
              data: [5000, 5000, 3500, 2003, 2155, 3300, 4300,3500, 1203, 3555, 2503, 3255,],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#4C29DF' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#33A9EE' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          },{
              name:'2020年',
              type: 'bar',
              data: [5000, 4500, 2500, 3200, 3255, 4000, 3000,3770, 2003, 4255, 2803, 4255],
              barWidth: '20%',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#DF7829' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#DFC365' // 100% 处的颜色
                      }], false),
                      barBorderRadius: 30,
                  }
              }
          }]
      };
      this.makeGraph(this.$refs.outPatientRegistration3,option5)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
      }
    }
  }
  .content-wrap{
    // height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) / 3 - 0.37rem) !important;
    .chart-content{
      width: 98%;
      margin-right: 1%;
      margin-left: 1%;
      // height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
      height:calc( (100vh - 1.23rem) / 3 - 0.37rem) !important;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>